<template>
  <div class="dashboard-container">
    <div class="app-container">

         <!-- 从学科进入 :  面包屑 -->
        <el-card v-if='Object.keys($route.query).length!==0'>
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item>学科管理</el-breadcrumb-item>
              <el-breadcrumb-item>{{$route.query.name}}</el-breadcrumb-item>
              <el-breadcrumb-item>目录管理</el-breadcrumb-item>
            </el-breadcrumb>
        </el-card>
     <el-card shadow="never">

        <!-- 第一行 :  表单 -->
        <el-row type="flex" justify="space-between">
          <el-col :span="18">
            <el-form ref="form" :model="form" label-width="80px" :inline="true" size="small">
                <el-form-item label="目录名称">
                      <el-input v-model="form.directoryName"></el-input>
                   </el-form-item>
                <el-form-item label="状态">
                   <el-select v-model="form.state"  placeholder="请选择">
                       <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value" />
                   </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="clearBtn">清除</el-button>
                    <el-button type="primary" @click="onSubmit">搜索</el-button>
                </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="6">
            <div class="btn">
              <el-button type="text" icon="el-icon-back" @click="returned" v-if='Object.keys($route.query).length!==0'>返回学科</el-button>
              <el-button type="success" size="small" icon="el-icon-edit" @click="addDirectory">新增目录</el-button>
            </div>
          </el-col>
        </el-row>

        <!-- 第二行 :  警告 -->
        <el-alert
          :title="`数据一共 ${total} 条`"
          type="info"
          show-icon
          :closable="false"
        >
        </el-alert>

        <!-- 第三行 :  表格 -->
        <el-table :data="directoryList" style="width: 100%">
          <el-table-column type="index" label="序号" width="80px">
          </el-table-column>
          <el-table-column prop="subjectName" label="所属学科">
          </el-table-column>
          <el-table-column prop="directoryName" label="目录名称">
          </el-table-column>
          <el-table-column prop="username" label="创建者"> </el-table-column>
          <el-table-column prop="addDate" label="创建者日期" width="300">
            <template slot-scope="scope">
              {{ scope.row.addDate | addDate }}
            </template>
          </el-table-column>
          <el-table-column prop="totals" label="面试题数量"> </el-table-column>
          <el-table-column prop="state" label="状态">
            <template slot-scope="scope">
              {{ scope.row.state | status }}
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">{{scope.row.state===1?'禁用':'启用'}}</el-button>
              <el-button type="text" size="small" @click="reviseClick(scope.row)" :disabled='scope.row.state===1'>修改</el-button>
              <el-button type="text" size="small" @click="delClick(scope.row.id)" :disabled='scope.row.state===1'>删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 第四行 :  分页 -->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="query.pagesize"
          layout="prev, pager, next,sizes, jumper"
          :total="total"
        >
        </el-pagination>

        <!-- 新增弹框 -->
        <el-dialog :title="isEdit?'编辑目录':'新增目录'" :visible.sync="dialogVisible" width="20%" @close='resetForm'>
          <directorys-add
            v-if="dialogVisible"
            ref="forms"
            :simple-list="simpleList"
            :dir-id='dirId'
            :row='row'
            :is-edit='isEdit'
            @close="cancel"
            />
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>

import dayjs from 'dayjs'
import DirectorysAdd from '@/module-hmmm/components/directorys-add'
import { list as getDirectoryList, remove, changeState } from '@/api/hmmm/directorys'
import { status } from '@/api/hmmm/constants'

export default {
  name: 'Directorys',
  components: {
    DirectorysAdd
  },
  filters: {
    // 状态
    status: (val) => {
      const obj = status.find(item => item.value === Number(val))
      if (obj) {
        return '已' + obj.label
      } else {
        return '未知'
      }
    },

    // 格式化时间
    addDate: (time) => {
      return dayjs(time).format('YYYY-MM-DD')
    }
  },
  data () {
    return {
      form: {
        directoryName: '', // 目录名称
        state: '' //  状态
      },
      directoryList: [], //  目录列表
      query: {
        page: 1, // 当前页数
        pagesize: 10 // 每页条数
      },
      total: 0, // 总条数
      dialogVisible: false, // 是否展示弹框
      simpleList: [], // 传给子组件的数据
      status, // 状态列表
      dirId: '', //  传递给子组件
      isEdit: false, //  是否编辑状态
      row: {} //  传递给子组件
    }
  },
  watch: {
    $route (to, from) {
      if (to.path === '/subjects/directorys') {
        this.getDirectoryList()
      }
    }
  },
  created () {
    this.getDirectoryList()
  },
  methods: {
    // 重置表单
    resetForm () {
      this.$refs.forms.resetForm()
    },

    // 禁用按钮
    async handleClick (row) {
      if (row.state === 1) {
        row.state = 0
      } else if (row.state === 0) {
        row.state = 1
      }

      await changeState({ id: row.id, state: row.state })
      this.$message.success('操作成功')
    },

    // 子传父
    cancel () {
      this.dialogVisible = false
      this.getDirectoryList()
    },

    // 搜索按钮
    onSubmit () {
      this.query.directoryName = this.form.directoryName
      this.query.state = this.form.state
      this.query.page = 1
      this.getDirectoryList()
      this.clearBtn() // 重置表单
    },

    // 修改按钮 --传给子组件
    async  reviseClick (row) {
      this.row = row
      this.dirId = row.id
      this.isEdit = true
      this.dialogVisible = true
    },

    // 删除目录
    async delClick (id) {
      const confirmList = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)

      if (confirmList === 'cancel') return this.$message('你取消了删除')
      await remove({ id })

      this.$message.success('操作成功')
      this.getDirectoryList()
    },

    // 新增目录 --- 按钮
    addDirectory () {
      this.isEdit = false
      this.dialogVisible = true
    },

    // 返回学科
    returned () {
      this.$router.push('/subjects/list')
    },

    // 清除按钮
    clearBtn () {
      this.form = {
        directoryName: '', // 目录名称
        state: '' //  状态
      }
      this.$refs.form.resetFields()
    },

    // 获取目录列表
    async getDirectoryList () {
      const res = await getDirectoryList(this.query)
      this.directoryList = res.data.items
      this.total = res.data.counts

      if (this.$route.query.id) {
        const asd = this.directoryList.filter(item => item.subjectName === this.$route.query.name && item.subjectID === +this.$route.query.id)
        this.directoryList = asd
      }

      this.simpleList = this.directoryList.map((item) => ({
        id: item.id,
        directoryName: item.directoryName, // 目录名称
        subjectName: item.subjectName, // 学科名称
        subjectID: item.subjectID // 学科ID
      }))
    },

    // 条数改变触发
    handleSizeChange (newpagesize) {
      this.query.pagesize = newpagesize
      this.getDirectoryList()
    },

    // 页码改变触发
    handleCurrentChange (newpage) {
      this.query.page = newpage
      this.getDirectoryList()
    }
  }
}
</script>

<style scoped lang="scss">
.btn {
  text-align: right;
}
.el-alert {
  margin-bottom: 20px;
}
.el-pagination {
  padding-top: 20px;
  text-align: right;
}
</style>
